<template>
	<view>
		<!-- 今日计划已完成显示区域 -->
		<view class="topShow">
			<image mode="widthFix" src="@/static/images/other/fireWork3.png"></image>
			<view class="right">
				<view class="planComp">今日计划已完成</view>
				<view class="wordShow">
					<view class="studyNum">
						<view class="num">{{dayComplete.studyNum}}</view>
						<view class="chinese">学习单词</view>
					</view>
					<view class="studyNum">
						<view class="num">{{dayComplete.persistNum}}</view>
						<view class="chinese">坚持天数</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日历区域 -->
		<view class="calendar">
			<uni-calendar :selected="dayComplete.dayList"></uni-calendar>
		</view>
		<!-- 显示签到次数区域 -->
		<view class="punchTime">
			<view class="punchContainer">
				<view class="chinese">连续签到</view>
				<view class="punchNumContainer">
					<view class="punchNum">{{dayComplete.continuesDay}}</view>
					<view class="punchDay">天</view>
				</view>
			</view>
			<view class="punchContainer">
				<view class="chinese">累计签到</view>
				<view class="punchNumContainer">
					<view class="punchNum">{{dayComplete.accumulateDay}}</view>
					<view class="punchDay">天</view>
				</view>
			</view>
		</view>
		<!-- 底部打卡区域 -->
		<view class="bottomPunch" @click="toPunch" :style="{'backgroundColor':themeColor}">
			<view class="punch">打卡</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {setDayComplete} from "@/api/planApi.js";
	import popup from "@/components/popup.vue";
	export default {
		components:{popup},
		data() {
			return {
				dayComplete:{},
				themeColor:"",
				themeColorLess:"",
			};
		},
		methods:{
			toPunch(){
				uni.navigateTo({
					url:"/pages/punch/punch"
				})
			}
		},
		async onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			let ans = (await setDayComplete()).data;
			console.log("ans",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.dayComplete = ans.data;
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: $bg-color;
	}

	// 今日计划已完成显示区域
	.topShow{
		background-color: $bg-color;
		padding-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		image{
			width: 340rpx;
		}
		
		.right{
			color: #283044;
			margin-right: 40rpx;
			display: flex;
			flex-direction: column;
			
			.planComp{
				font-size: 40rpx;
				font-weight: 600;
			}
			
			.wordShow{
				margin-top: 50rpx;
				display: flex;
				
				.studyNum{
					.num{
						font-size: 70rpx;
						font-weight: 700;
						font-style: italic;
					}
					
					.chinese{
						margin-top: 14rpx;
						font-size: 20rpx;
						color: #808080;
					}
				}
				
				.studyNum:nth-child(2){
					margin-left: 100rpx;
				}
				
				
			}
		}
	}
	
	// 日历区域
	.calendar{
		margin: 40rpx $both-sides;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	// 显示签到次数区域
	.punchTime{
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		border-top: solid $border-color $border-size;
		
		.punchContainer{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			
			.chinese{
				font-size: 18rpx;
				color: #808080;
				
			}
			
			.punchNumContainer{
				display: flex;
				align-items: flex-end;
				
				.punchNum{
					font-size: 32rpx;
					color: #283044;
					font-weight: 700;
				}
				
				.punchDay{
					font-size: 16rpx;
					margin-left: 10rpx;
					color: #808080;
				}
			}
		}
	}
	
	// 底部打卡区域
	.bottomPunch{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: $theme-color;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.punch{
			font-size: 32rpx;
			color: #efefef;
			font-weight: 600;
		}
	}
	
</style>
